import Head from 'next/head';
import RootPropTable from '../../../components/prop-tables/RootPropTable';
import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import DNDExample from '../../../examples/enable-column-ordering';

<Head>
  <title>
    Column Ordering/DnD Feature Guide - Material React Table V1 Docs
  </title>
  <meta
    name="description"
    content="How to use and customize the column ordering and drag and drop features of Material React Table"
  />
</Head>

## Column Ordering (DnD) Feature Guide

Whether you just want to change the default column order in your table or let columns be reordered by dragging and dropping, Material React Table has a simple API for this.

### Relevant Props

<RootPropTable
  onlyProps={
    new Set([
      'enableColumnDragging',
      'enableColumnOrdering',
      'onColumnOrderChange',
      'onDraggingColumnChange',
      'onHoveredColumnChange',
    ])
  }
/>

### Relevant Column Options

<ColumnOptionsTable
  onlyProps={new Set(['enableColumnDragging', 'enableColumnOrdering'])}
/>

### Relevant State

<StateOptionsTable
  onlyProps={new Set(['columnOrder', 'draggingColumn', 'hoveredColumn'])}
/>

### Change the Default Column Order

By Default, Material React Table will order the columns in the order they are defined in the `columns` prop. And Display Columns such as Actions, Selection, Expansion, etc., get added to either the beginning or the end of the table. You can customize all of this by defining your own `columnOrder` State and passing it either to the `initialState` or `state` props.

The Column Order State is an array of string column ids, that come from the ids or accessorKeys that you defined in your column definitions.

```tsx
<MaterialReactTable
  data={data}
  columns={columns}
  enableRowSelection
  initialState={{
    columnOrder: [
      'name',
      'email',
      'phone',
      'city',
      'country',
      'mrt-row-select', //move the built-in selection column to the end of the table
    ],
  }}
/>
```

### Manage Column Order State

If you need to manage the `columnOrder` state yourself, you can do so in the `state` prop and `onColumnOrderChange` callback, but you will also need to initialize the `columnOrder` state yourself.

```jsx
const columns = [
  //...
];

//easy shortcut to initialize the columnOrder state as array of column ids
const [columnOrder, setColumnOrder] = useState(
  columns.map((c) => c.accessorKey), //array of column ids
);

return (
  <MaterialReactTable
    data={data}
    columns={columns}
    enableRowSelection
    state={state}
    onColumnOrderChange={onColumnOrderChange}
  />
);
```

### Enable Column Ordering with Drag and Drop

Material React Table has a built-in drag and drop feature to reorder columns. This feature is enabled by passing the `enableColumnOrdering` prop.

The ability for a column to have a drag and drop handle can be specified by setting the `enableColumnOrdering` option on the column.

<DNDExample />

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-column-ordering-examples)**
